<script setup lang="ts">
import { ref, computed } from "vue";
import OrderStatus0 from "@/components/orderStatus/OrderStatus0.vue";
import OrderStatus1 from "@/components/orderStatus/OrderStatus1.vue";
import OrderStatus2 from "@/components/orderStatus/OrderStatus2.vue";
import OrderStatus3 from "@/components/orderStatus/OrderStatus3.vue";
import OrderStatus4 from "@/components/orderStatus/OrderStatus4.vue";
import OrderStatus5 from "@/components/orderStatus/OrderStatus5.vue";
import OrderStatus6 from "@/components/orderStatus/OrderStatus6.vue";
import OrderStatus7 from "@/components/orderStatus/OrderStatus7.vue";
import OrderStatus8 from "@/components/orderStatus/OrderStatus8.vue";
import { payTypeConfig } from "@/utils/appData";
import type { OrderDetail, GoodsDetail } from "@/types/order";
import { serverTimeTypeConfig } from "@/utils/appData";

const emits = defineEmits(["update:orderDetails"]);
const props = defineProps<{
  orderDetails: OrderDetail | null;
  goodsDetails: GoodsDetail | null;
}>();

const deliverDays = computed(() => {
  return props.orderDetails?.versionInfo?.deliverDays || "-";
});

const serviceList = computed(() => {
  return props.orderDetails?.versionInfo?.detailList || [];
});

const versionType = computed(() => {
  return props.orderDetails?.versionInfo.versionType === 1 ? "标准版" : "体验版";
});

const serverTimeType = computed(() => {
  const time = serverTimeTypeConfig.find(
    (item) => item.value === props.goodsDetails?.serverTimeType
  );
  return time ? `${time.label}小时内` : "暂未开启";
});


const updateOrderDetails = () => {
  emits("update:orderDetails");
};
</script>

<template>
  <div class="order-status">
    <OrderStatus0
      v-if="orderDetails?.status === 0"
      :orderDetails="orderDetails"
      :goodsDetails="goodsDetails"
    />
    <OrderStatus1
      v-if="orderDetails?.status === 1 && !orderDetails?.stepStatus"
      :orderDetails="orderDetails"
      :goodsDetails="goodsDetails"
    />
    <OrderStatus2
      v-if="orderDetails?.status === 1 && orderDetails?.stepStatus === 1"
      :orderDetails="orderDetails"
      :goodsDetails="goodsDetails"
    />
    <OrderStatus3
      v-if="orderDetails?.status === 1 && orderDetails?.stepStatus === 2"
      :orderDetails="orderDetails"
      :goodsDetails="goodsDetails"
    />
    <OrderStatus4
      v-if="
        orderDetails?.status === 3 &&
        (orderDetails?.stepStatus === 4 || orderDetails?.stepStatus === 5)
      "
      :orderDetails="orderDetails"
      :goodsDetails="goodsDetails"
    />
    <OrderStatus5
      v-if="orderDetails?.status === 3 && orderDetails?.stepStatus === 6"
      :orderDetails="orderDetails"
      :goodsDetails="goodsDetails"
    />
    <OrderStatus6
      v-if="
        (orderDetails?.status === 5 || orderDetails?.status === 6) &&
        !orderDetails?.salesCommentStatus
      "
      :orderDetails="orderDetails"
      :goodsDetails="goodsDetails"
      @update:orderDetails="updateOrderDetails"
    />
    <OrderStatus7
      v-if="orderDetails?.status === 6 && orderDetails?.salesCommentStatus"
      :orderDetails="orderDetails"
      :goodsDetails="goodsDetails"
    />
    <OrderStatus8
      v-if="orderDetails?.status === 2"
      :orderDetails="orderDetails"
      :goodsDetails="goodsDetails"
    />
  </div>
  <div class="goods" v-if="orderDetails && goodsDetails">
    <div class="img-name">
      <img class="goods-img" :src="goodsDetails.coverPic" alt="" />
      <div class="goods-name">
        <h4>{{ orderDetails.goodsName }}</h4>
        <p>{{ versionType }}</p>
      </div>
    </div>
    <p class="get">
      <span>您将得到</span> <span>{{ versionType }}</span>
    </p>
    <div class="buy-service-list">
      <p v-for="(item, index) in serviceList.filter((item) => item)" :key="index">
        <img src="@/assets/group-select-icon.png" alt="" />
        <span>{{ item }}</span>
      </p>
    </div>
    <p class="other">
      <span>交付周期</span> <span>{{ deliverDays }}天</span>
    </p>
    <p class="other">
      <span>开启时间</span>
      <span>{{ serverTimeType }}</span>
    </p>
    <p class="other">
      <span>备注</span> <span>{{ orderDetails.remark || "-" }}</span>
    </p>
  </div>
  <div class="order-pay" v-if="orderDetails">
    <p>
      <span>订单编号</span> <span>{{ orderDetails.id }}</span>
    </p>
    <p>
      <span>创建时间</span> <span>{{ orderDetails.createTime }}</span>
    </p>
    <p>
      <span>支付时间</span> <span>{{ orderDetails.payTime || "-" }}</span>
    </p>
    <p>
      <span>支付方式</span>
      <span>{{
        payTypeConfig.find((item) => item.value === orderDetails.payType)?.label || "-"
      }}</span>
    </p>
  </div>
</template>

<style scoped lang="scss">
.order-status {
  background: #ffffff;
  box-shadow: 0px 0px 16px 0px rgba(11, 13, 18, 0.06);
  border-radius: 16px 16px 16px 16px;
  border: 1px solid rgba(25, 30, 40, 0.08);
  padding: 20px;
  margin-bottom: 16px;
}
.goods {
  background: #ffffff;
  box-shadow: 0px 0px 16px 0px rgba(11, 13, 18, 0.06);
  border-radius: 16px 16px 16px 16px;
  border: 1px solid rgba(25, 30, 40, 0.08);
  padding: 20px;
  margin-bottom: 16px;
  .img-name {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    .goods-img {
      flex: 0 0 120px;
      width: 120px;
      height: 76px;
      object-fit: cover;
      margin-right: 12px;
      border-radius: 8px;
    }
    .goods-name {
      flex: 1;
      height: 76px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 5px 0;
      box-sizing: border-box;
      h4 {
        color: #191e28;
        font-size: 15px;
      }
      p {
        font-size: 12px;
        color: rgba(25, 30, 40, 0.6);
      }
    }
  }
  .get {
    display: flex;
    align-items: center;
    justify-content: space-between;
    span:nth-child(1) {
      font-size: 16px;
      font-weight: 600;
      color: #191e28;
    }
    span:nth-child(2) {
      font-size: 16px;
      color: #191e28;
    }
  }
  .buy-service-list {
    background: rgba(25, 30, 40, 0.02);
    border-radius: 12px 12px 12px 12px;
    padding: 20px;
    margin-top: 16px;
    margin-bottom: 16px;
    p {
      display: flex;
      align-items: center;
      margin-bottom: 8px;
      &:last-child {
        margin-bottom: 0;
      }
      img {
        width: 14px;
        height: 14px;
        margin-right: 7px;
      }
      span {
        color: rgba(25, 30, 40, 0.6);
      }
    }
  }
  .other {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    &:last-child {
      margin-bottom: 0;
    }
    span:nth-child(1) {
      color: rgba(25, 30, 40, 0.48);
      font-size: 16px;
    }
    span:nth-child(2) {
      color: #191e28;
      font-size: 16px;
    }
  }
}
.order-pay {
  background: #ffffff;
  box-shadow: 0px 0px 16px 0px rgba(11, 13, 18, 0.06);
  border-radius: 16px 16px 16px 16px;
  border: 1px solid rgba(25, 30, 40, 0.08);
  padding: 20px;
  p {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    &:last-child {
      margin-bottom: 0;
    }
    span:nth-child(1) {
      color: rgba(25, 30, 40, 0.48);
      font-size: 16px;
    }
    span:nth-child(2) {
      color: #191e28;
      font-size: 16px;
    }
  }
}
</style>
